<template>
	<view class="content">
		<view class="header" :style="{'padding-top':tops+'px'}">
			<view style="height: 100rpx;">
				<view class="back" @click="goBack">
					<image src="../../static/9.png"></image>
				</view>
				<view class="name">添加客户深度印象</view>
				<view class="history" @click="history()">历史记录</view>
			</view>
		
			<view class="tabList-box" :style="{'height': screenHeight + 'px'}">
				<view class="tabList">
					<view class="li" :class="tabActive == index ? 'tabActive':''" v-for="(item,index) in tabList"
						@click="tabChange(index)">{{ item.text }}</view>
				</view>
				<view class="tabCon">
					<view class="uni-px-5 uni-pb-5">
						<uni-data-checkbox mode="tag" multiple v-model="checkbox3" :localdata="hobby"></uni-data-checkbox>
					</view>
				</view>
			</view>
			<button class="save-btn" @click="saveFormData">保存</button>
		</view>
		
		
        
	    <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" @maskClick="closeScreen">
	    	<view class="screen-box">
	    		<view class="title">跟进类别 <image class="close" @click="closeScreen" src="../../static/18.png"></image></view>
	    		<input type="text" placeholder="请输入类别名称"/>
	    		<view class="swichBox">
					<view class="li" v-for="(item,index) in swich" :class="swichActive == index ? 'tabActive':''" @click="swichChange(index)">{{item.name }}</view>
				</view>
				<view class="btn">
	    			保存
	    		</view>
	    	</view>
	    </uni-popup>
	</view>
</template>

<script>
	import {
		list_kehuyinxiangcaidan,
		list_kehuyinxiangxuanxiang,
		put_kehu,
		list_kehu
	} from "@/utils/api.js";
	export default {
		data() {
			return {
				title: 'Hello',
				tabList: [],
				tabActive: 0,
				swich: [{
						name: '正常',
						value: 0
					},
					{
						name: '禁用',
						value: 1
					}
				],
				swichActive: 0,
				hobby: [],
				checkbox3:[],
				tops:0,
				height:0,
				screenHeight:'',
				kehu_id:'',
				formData:'',
				kehuyinxiang:[],
				formData:''
			}
		},
		onLoad(options) {
		this.kehu_id = options.kehu_id
		if(this.kehu_id){
			this.getIinfo()
			}
			this.height = 100;
			uni.getSystemInfo({

				success: (e) => {

				  this.tops = e.statusBarHeight;
				   console.log('========',e)
				   this.screenHeight = e.screenHeight - 40
				  let custom = uni.getMenuButtonBoundingClientRect();
				  
				 /*#ifdef MP-WEIXIN*/
                  this.height = 140 + custom.height + (custom.top - e.statusBarHeight) * 2;
                  /*#endif*/				 
				}

			  })
              this.getList()
		},
		methods: {
			async getIinfo(){
				let that = this
				let data = {
					user_id:uni.getStorageSync('userInfo').user_id,
					kehu_id:that.kehu_id
				}
				let res = await list_kehu(data,that.kehu_id);
				
					
				that.formData = res.results
				console.log('客户信息',that.formData)
			},
			
			// 列表
			async getList(type) {
				let that = this
				let data = {
					page: 1,
					size: 999,
					user_id: uni.getStorageSync('userInfo').user_id
				}
				let res = await list_kehuyinxiangcaidan(data);
			
				if (res.code == 0) {
					that.tabList = res.results
					that.getChild(that.tabList[0].kehuyinxiang_caidan_id)
				}
			},
			async saveFormData() {
				let that = this
				that.formData.kehuyinxiang = JSON.stringify(that.checkbox3) 
				that.formData.koushuyonghuozhonglei = JSON.stringify(that.formData.koushuyonghuozhonglei)
				that.formData.shijiyonghuozhonglei = JSON.stringify(that.formData.shijiyonghuozhonglei)
				that.formData.dangkou_img_list= JSON.stringify(that.formData.dangkou_img_list)
				that.formData.fangchanzheng_img_list= JSON.stringify(that.formData.fangchanzheng_img_list)
				that.formData.qitarenwuguanxi= JSON.stringify(that.formData.qitarenwuguanxi)
				that.formData.qiti_img_list= JSON.stringify(that.formData.qiti_img_list)
				that.formData.shenfenzheng_img_list= JSON.stringify(that.formData.shenfenzheng_img_list)
				that.formData.xingshizheng_img_list= JSON.stringify(that.formData.xingshizheng_img_list)
				let res = await put_kehu(that.formData, that.kehu_id)
				console.log('修改状态', res)
				if (res.code == 0) {
					uni.showToast({
						title: '修改成功',
						//icon: 'none',
						duration: 2000
					});
					uni.navigateBack()
				}
			},
			async getChild(id){
				let that = this
				let data = {
					page: 1,
					size: 999,
					user_id: uni.getStorageSync('userInfo').user_id,
					kehuyinxiang_caidan_id:id
				}
				let res = await list_kehuyinxiangxuanxiang(data);
							
				if (res.code == 0) {
					
					for(var i=0;i<res.results.length;i++){
						res.results[i].value = res.results[i].kehuyinxiang_xuanxiang_id

					}
					that.hobby = res.results
					
				}
			},
			goBack(){
				uni.navigateBack()
			},
			showPop(){
				 this.$refs.popup.open('center')
				 this.screenPop = true
			},
			closeScreen(){
				this.$refs.popup.close()
				console.log('关闭')
				 this.screenPop = false
			},
			confirmScreen(){
				this.$refs.popup.close()
			},
			addSeniorData(){
				uni.navigateTo({
					url:"/pages/addSeniorData/index"
				})
			},
			tabChange(index) {
				this.tabActive = index
				this.getChild(this.tabList[index].kehuyinxiang_caidan_id)
			},
			swichChange(index){
				this.swichActive = index
			},
			history(){
				uni.navigateTo({
					url:'/pages/impressionHistory/index'
				})
			},

		}
	}
</script>

<style>
	
	.screen-box{
		width: 520rpx;
		height: 400rpx;
		background-color: white;
		border-radius: 10rpx;
		font-size: 26rpx;
	}
	.screen-box .title{
		width: 90%;
		margin: auto;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	    color: #008BDE;
		text-align: center;
	}
	.screen-box .title .close{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 20rpx;
		top: 15rpx;
	}
	.screen-box input{
		width: 75%;
		display: block;
		border: 1rpx solid #ccc;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 26rpx;
		margin: auto;
		padding-left: 20rpx;
		text-align: center;
		border-radius: 10rpx;
	}
	.swichBox{
	   width: 78.3%;
		height: 60rpx;
		margin: auto;
		line-height: 60rpx;
		border: 1rpx solid #008BDE;
		display: flex;
		margin-top: 20rpx;
	}
	
	.swichBox .li {
		width: 50%;
		text-align: center;
		font-size: 26rpx;
	}
	
	.swichActive {
		background-color: #008BDE;
		color: white !important;
	}
	.header{
		width: 100%;
		height: 180rpx;
		line-height: 90rpx;
		position: fixed;
		top: 0;
		z-index: 10;
		text-align: center;
		background-color: white;
	}
	.header .back {
		height: 100%;
		width: 40rpx;
		margin-left: 30rpx;
		float: left;
		display: flex;
		align-items: center;
	}
	.header .back image{
		width: 20rpx;
		height: 40rpx;
		
	}
	.header .name{
		height: 100%;
		line-height: 90rpx;
		margin-top:7rpx;
		margin-left: 20rpx;
		background-color: white;
	}
	.header .history{
		width: 150rpx;
		height: 55rpx;
		line-height: 55rpx;
		background: #008BDE;
		border-radius: 5rpx;
		position: absolute;
		font-size: 26rpx;
		right: 40rpx;
		top: 26rpx;
		color: #fff;
	}
	/*#ifdef MP-WEIXIN*/
	   .header .name{
	   	width: 35%;
		height: 70rpx;
	   	line-height:70rpx;
		margin-right: 50rpx;
		float: left;
		margin-top:13rpx;
	   }
	   .header .history{
		   float: left;
		   position: initial;
		   margin-top: 24rpx;
	   }
	/*#endif*/
	.tabList-box{
		width: 100%;
		background-color: white;
		background-color: white;
		display: flex;
		/* position: fixed;
		top: 100rpx;
		left: 0;
		right: 0; */
		margin: auto;
		z-index: 100;
		/*#ifdef MP-WEIXIN*/
		/* top: 120rpx; */
		/*#endif*/
	}
	.tabList {
		width: 200rpx;
		line-height: 60rpx;
		border-top: 1rpx solid #ccc;
	}

	.tabList .li {
		width: 100%;
		text-align: center;
		color: #333;
		font-size: 26rpx;
		border-bottom: 1rpx solid #ccc;
		border-right: 1rpx solid #ccc;
		
	}

	.tabActive {
		background-color: #008BDE;
		color: white !important;
	}
    .lists{
    	width: 90%;
    	margin: auto;
    	margin-top: 220rpx;
        /*#ifdef MP-WEIXIN*/
        margin-top: 250rpx;
        /*#endif*/
    }
    
	
	.imgList{
		margin-top: 20rpx;
	}
	/deep/ .icon-add{
		width: 50rpx;
	}
	
	.save-btn{
		width: 80%;
		height: 66rpx;
		line-height: 66rpx;
		border-radius: 80rpx;
		color: white;
		text-align: center;
		margin: auto;
		background-color: #008BDE;
		margin-top: 50rpx;
		font-size: 26rpx;
		position: fixed;
		bottom: 15%;
		left: 0;
		right: 0;
		margin: auto;
		
	}
	/deep/ .checklist-box{
		width: 102rpx !important;
		display: inherit !important;
	}
    /deep/ .checklist-box.is--tag{
		width: 142rpx !important;
		height: 55rpx;
		padding: 0 !important;
	}
	/deep/ .checklist-content{
		width: 90%;
		flex: none !important;
		display: inherit !important;
		text-align: center;
		margin: auto;
	}
	/deep/ .checklist-text{
		width: 100%;
		overflow: hidden; 
		white-space: nowrap; 
		text-overflow: ellipsis;
		flex-wrap: nowrap;
		text-align: center;
	}
	/deep/ .checklist-text span{
		width: 100%;
		overflow: hidden; 
		white-space: nowrap; 
		text-overflow: ellipsis;
		flex-wrap: nowrap;
		text-align: center;
	}
	.tabCon{
		width: 500rpx;
		height: 100%;
		margin-left: 20rpx;
	}

</style>